<template>
  <div class="query-messages h-full flex flex-col">
    <!-- 消息工具栏 -->
    <div class="messages-toolbar flex justify-between items-center p-2 bg-gray-50 border-b border-gray-200">
      <span class="text-xs text-gray-500">共 {{ messages.length }} 条消息</span>
      <div class="flex space-x-2">
        <el-button size="small" text @click="clearMessages">
          <el-icon><Delete /></el-icon>
          清空
        </el-button>
        <el-switch
          v-model="autoScroll"
          active-text="自动滚动"
          size="small"
        />
      </div>
    </div>
    
    <!-- 消息列表 -->
    <div ref="messagesContainer" class="messages-content flex-1 p-2 overflow-y-auto">
      <div v-if="messages.length > 0" class="message-list">
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="['message-item', `message-${message.type}`]"
        >
          <div class="message-time text-xs text-gray-500">
            {{ formatTime(message.timestamp) }}
          </div>
          <div class="message-text font-mono">{{ message.text }}</div>
        </div>
      </div>
      <div v-else class="no-messages text-center py-8">
        <el-icon class="text-4xl text-gray-400 mb-2"><ChatDotRound /></el-icon>
        <p class="text-gray-500">暂无消息</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['clear'])

const messagesContainer = ref(null)
const autoScroll = ref(true)

// 监听消息变化，自动滚动到底部
watch(
  () => props.messages,
  () => {
    if (autoScroll.value && props.messages.length > 0) {
      nextTick(() => {
        scrollToBottom()
      })
    }
  },
  { deep: true }
)

// 格式化时间
const formatTime = (timestamp) => {
  return dayjs(timestamp).format('HH:mm:ss.SSS')
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 清空消息
const clearMessages = () => {
  emit('clear')
}
</script>

<style scoped>
.message-item {
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  border-left: 3px solid #e5e7eb;
  background: #f9fafb;
}

.message-item.message-info {
  background: #f0f9ff;
  border-left-color: #3b82f6;
}

.message-item.message-success {
  background: #f0fdf4;
  border-left-color: #10b981;
}

.message-item.message-error {
  background: #fef2f2;
  border-left-color: #ef4444;
}

.message-item.message-warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
}

.message-time {
  margin-bottom: 4px;
}

.message-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.message-item.message-info .message-text {
  color: #1e40af;
}

.message-item.message-success .message-text {
  color: #047857;
}

.message-item.message-error .message-text {
  color: #b91c1c;
}

.message-item.message-warning .message-text {
  color: #b45309;
}

/* 自定义滚动条 */
.messages-content::-webkit-scrollbar {
  width: 6px;
}

.messages-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.messages-content::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.8);
  border-radius: 3px;
}

.messages-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style> 